/**
 * @fileOverview 图像切割
 * @author <a href="mailto:lexloo@126.com">lexloo</a>
 */

(function() {
	if (typeof ImgCropper != 'undefined') {
		return;
	}
	/**
	 * 创建图像切割系统
	 * 
	 * @class 图像切割系统
	 * @version 1.0
	 * @constructor
	 * @author <a href="mailto:lexloo@126.com">lexloo</a>
	 * @param {Object}
	 *            config 配置参数 <table>
	 *            <tr>
	 *            <td><b>url</b></td>
	 *            <td>图像地址</td>
	 *            </tr>
	 *            <tr>
	 *            <td><b>options</b></td>
	 *            <td>其它属性</td>
	 *            </tr>
	 *            </table>
	 */
	ImgCropper = function(config) {
		this.initialize(config);
	};

	/**
	 * @private
	 * 
	 * @param {Object}
	 * 
	 */
	$Lang.apply(ImgCropper.prototype, {
		initialize : function(config) {
			/* 容器对象 */
			this.container = $('bgDiv');
			/* 裁剪对象 */
			this.eyeView = $('eyeDiv');
			/* 图片地址 */
			this.URL = config.url;
			/* 默认缩放比例 */
			this.scale = 1.0;
			this.setOptions(config.options);

			this.opacity = this.options.opacity;
			this.color = this.options.color;
			this.scaleFactory = this.options.scaleFactor;
			this.width = this.options.width;
			this.height = this.options.height;

			/* 底层 */
			this.layBase = this.container.appendChild($E( {
				tag : 'img'
			}));
			/* 切割层 */
			this.layCropper = this.eyeView.appendChild($E( {
				tag : 'img'
			}));

			$XEvent.addListener(this.layCropper, 'load', this.setSize.bind(this));

			this.init();
		},

		/**
		 * 初始化操作
		 * 
		 * @private
		 */
		init : function() {
			/* 设置背景色 */
			this.color && ($Dom.setStyle(this.container, 'backgroundColor', this.color));
			/* 设置图片 */
			this.layCropper.src = this.layBase.src = this.URL;
		},

		/**
		 * 设置图片大小与位置
		 * 
		 * @private
		 */
		setSize : function() {
			$Dom.setWidth(this.eyeView, this.width);
			$Dom.setHeight(this.eyeView, this.height);

			$Dom.setStyle(this.layBase, 'position', 'absolute');
			$Dom.setOpacity(this.layBase, this.opacity);
			var cw = $Dom.getWidth(this.container);
			var ch = $Dom.getHeight(this.container);

			this.picWidth = $Dom.getWidth(this.layBase);
			this.picHeight = $Dom.getHeight(this.layBase);

			this.offsetImgX = (cw - this.picWidth) / 2;
			this.offsetImgY = (ch - this.picHeight) / 2;

			this.offsetX = (cw - $Dom.getWidth(this.eyeView)) / 2;
			this.offsetY = (ch - $Dom.getHeight(this.eyeView)) / 2;

			$Dom.setLocation(this.eyeView, this.offsetX, this.offsetY);
			$Dom.setStyle(this.layCropper, 'position', 'absolute');
			$Dom.setStyle(this.layCropper, 'zIndex', 100);

			$Dom.setLocation(this.layBase, this.offsetImgX, this.offsetImgY);
			$Dom.setLocation(this.layCropper, this.offsetImgX - this.offsetX, this.offsetImgY - this.offsetY);

			/* 拖动 */
			this.drag = new $XDrag(this.layBase, null, {
				minLeft : -9999,
				minTop : -9999
			});
			this.drag.addListener('move', this.move.bind(this));
			this.dragCropper = new $XDrag(this.layCropper, null, {
				minLeft : -9999,
				minTop : -9999
			});

			this.dragCropper.addListener('move', this.moveCrpper.bind(this));
		},

		/**
		 * 设置默认属性
		 * 
		 * @private
		 */
		setOptions : function(options) {
			this.options = {
				/* 透明度(0到1) */
				opacity : 0.1,
				/* 背景色 */
				color : "#FFF",
				/* 图片高度 */
				width : 160,
				/* 图片高度 */
				height : 180,
				/* 缩放因子 */
				scaleFactor : 0.8
			};
			$Lang.apply(this.options, options || {});
		},

		/**
		 * 移动背景图
		 * 
		 * @private
		 */
		move : function() {
			var l = $Dom.getLeft(this.layBase);
			var t = $Dom.getTop(this.layBase);

			$Dom.setLocation(this.layCropper, l - this.offsetX, t - this.offsetY);
		},

		/**
		 * 移动裁剪图
		 * 
		 * @private
		 */
		moveCrpper : function() {
			var l = $Dom.getLeft(this.layCropper);
			var t = $Dom.getTop(this.layCropper);

			$Dom.setLocation(this.layBase, l + this.offsetX, t + this.offsetY);
		}
	});

	/**
	 * 设置图片URL
	 * 
	 * @param {String}
	 *            url 图片URL
	 */
	ImgCropper.prototype.setURL = function(url) {
		this.layCropper.src = this.layBase.src = this.URL = url;
	};

	/**
	 * 获取图片URL
	 * 
	 * @param {String}
	 *            url 图片URL
	 */
	ImgCropper.prototype.getURL = function() {
		return this.URL;
	};

	/**
	 * 放大图片
	 */
	ImgCropper.prototype.zoomIn = function() {
		this.scale = this.scale * this.scaleFactory;
		$Dom.setWidth(this.layCropper, $Dom.getWidth(this.layCropper) * this.scaleFactory);
		$Dom.setWidth(this.layBase, $Dom.getWidth(this.layBase) * this.scaleFactory);
	};

	/**
	 * 缩小图片
	 */
	ImgCropper.prototype.zoomOut = function() {
		this.scale = this.scale / this.scaleFactory;
		$Dom.setWidth(this.layCropper, $Dom.getWidth(this.layCropper) / this.scaleFactory);
		$Dom.setWidth(this.layBase, $Dom.getWidth(this.layBase) / this.scaleFactory);
	};

	/**
	 * 获取裁剪参数
	 */
	ImgCropper.prototype.getOutputParams = function() {
		return {
			scale : this.scale,
			left : -$Dom.getLeft(this.layCropper),
			top : -$Dom.getTop(this.layCropper),
			width : this.width,
			height : this.height
		};
	};
})();
